<template>
  <el-card class="box-card" >
    <el-row>
      <el-col :span="6">
        抢租客姓名：
        <el-input style="width: 150px"
                  placeholder="请输入内容"
                  prefix-icon="el-icon-search"
                  v-model="input">
        </el-input>
      </el-col>
      <el-col :span="6">
        手机号码：
        <el-input style="width: 150px"
                  placeholder="请输入内容"
                  prefix-icon="el-icon-search"
                  v-model="input">
        </el-input>
      </el-col>
      <el-col :span="6">
        车牌号：
        <el-input style="width: 150px"
                  placeholder="请输入内容"
                  prefix-icon="el-icon-search"
                  v-model="input">
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-button>查询</el-button>
      </el-col>
    </el-row>

    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="date"
          label="序号"
          width="150">
      </el-table-column>
      <el-table-column
          prop="name"
          label="用户名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="province"
          label="手机号码"
          width="120">
      </el-table-column>
      <el-table-column
          prop="city"
          label="车牌号"
          width="120">
      </el-table-column>
      <el-table-column
          prop="address"
          label="总收益"
          width="100">
      </el-table-column>
      <el-table-column
          prop="zip"
          label="使用时长"
          width="120">
      </el-table-column>
      <el-table-column
          prop="zip"
          label="审核状态"
          width="120">
      </el-table-column>
      <el-table-column
          prop="zip"
          label="是否黑名单"
          width="120">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
      >
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          layout="prev, pager, next"
          :total="1000">
      </el-pagination>
    </div>
  </el-card>

</template>

<script>
export default {
  name: "UserRiverShow",
  data() {
    return {
      input: '',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }]
    }
  },
  methods: {
    handleClick(){
      this.$router.push({name:"UpdUser"})
    }
  }
}
</script>

<style>
.el-row {
  margin-bottom: 20px
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>